﻿<!DOCTYPE HTML>
<html th:with="title='权限管理'" >
<head th:include="fragments/header :: header">
</head>
<body id="app">
<div class="page-container">
	<div class="cl pd-5 bg-1 bk-gray"> 
		<span class="l">
			<a sec:authorize="hasRole('ROLE_ROLE_ADD')" class="btn btn-primary size-L radius" href="javascript:;" onclick="add()" ><i class="Hui-iconfont">&#xe600;</i> 新增</a>
			<a sec:authorize="hasRole('ROLE_ROLE_BATCH_DELETE')" class="btn btn-danger size-L radius" href="javascript:;" onclick="batchDel()" ><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> 
		</span> 
		<span class="r">
 			<a class="btn btn-success size-L radius" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i>重置</a>
		</span> 
	</div>
	<div class="text-l pd-5"> 名称：
		<input type="text" class="input-text size-M" style="width:150px" placeholder="请输入权限名称" id="name" name="name">
		描述：<input type="text" class="input-text size-M" style="width:150px" placeholder="请输入权限描述" id="remark" name="remark">
		<button sec:authorize="hasRole('ROLE_ROLE_QUERY')" type="button" class="btn btn-success size-M radius" onclick="query()"><i class="Hui-iconfont">&#xe665;</i> 查询</button>
	</div>
	<div>
    <table class="table table-border table-bordered table-hover table-bg table-sort">
		<thead>
			<tr class="text-c">
				<th width="25"><input type="checkbox" v-on:click="checkAll(this.checked)" ></th>
				<th width="50">ID</th>
				<th width="100">名称</th>
				<th width="100">描述</th>
				<th width="100">上级权限</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr class="text-c" v-for="item in pageData.rows">
				<td><input type="checkbox" value="{{ item.id }}" name="ids"></td>
				<td>{{ item.id }}</td>
				<td class="text-l">{{ item.name }}</td>
				<td class="text-l">{{ item.remark }}</td>
				<td class="text-l">{{ item.parent.remark }}</td>
				<td class="td-manage">
					<!-- <a title="查看" href="javascript:;" onclick="view('{{item.id}}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe695;</i></a> --> 
					<a sec:authorize="hasRole('ROLE_ROLE_EDIT')" title="编辑" href="javascript:;" onclick="edit('{{item.id}}')" class="ml-5" style="text-decoration:none" class="btn btn-primary size-L radius"><i class="Hui-iconfont">&#xe6df;</i>编辑</a> 
					<a sec:authorize="hasRole('ROLE_ROLE_DELETE')" title="删除" href="javascript:;" onclick="del('{{item.id}}')" class="ml-5" style="text-decoration:none" class="btn btn-danger size-L radius"><i class="Hui-iconfont">&#xe6e2;</i>删除</a>
				</td>
			</tr>
		</tbody>
	</table>
	
	<div v-show="pageData.total > 0" class="laypage_main laypageskin_default" style="margin-top: 10px">
			<div class="l">
				<span>每页 <select name="pageSizeSelect" id="pageSizeSelect" style="vertical-align: baseline!important; height: 27.6px;" onchange="query()">
						<option value="10" selected="selected">10</option>
						<option value="25">25</option>
						<option value="50">50</option>
						<option value="100">100</option>
				</select> 条
				 显示 {{pageData.rowIndexStart}} 到 {{pageData.rowIndexEnd}} ，共 {{pageData.total}} 条</span>
			 </div>
			<div id="pageNav" class="r"></div>
	</div>

	</div>
</div>
<script type="text/javascript">


/*用户-查看*/
function member_show(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*用户-停用*/
function member_stop(obj,id){
	layer.confirm('确认要停用吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
		$(obj).remove();
		layer.msg('已停用!',{icon: 5,time:1000});
	});
}

/*用户-启用*/
function member_start(obj,id){
	layer.confirm('确认要启用吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
		$(obj).remove();
		layer.msg('已启用!',{icon: 6,time:1000});
	});
}
/*用户-编辑*/
function member_edit(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*密码-修改*/
function change_password(title,url,id,w,h){
	layer_show(title,url,w,h);	
}
/*用户-删除*/
function member_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$(obj).parents("tr").remove();
		layer.msg('已删除!',{icon:1,time:1000});
	});
}
// ==================================================
var app = new Vue({
	  el: '#app',
	  data: {
		  pageData: {}
	  }
	});

/*
 * 查询
 */
function query(pageNo, pageSize) {
	if (!pageNo) {
		pageNo = 1;
	}
	if (!pageSize) {
		pageSize = $("#pageSizeSelect").val();
	}
	var tip = layer.load(0, {shade: false});
	$.ajax({
	    type: "POST",
	    url: '/security/role/queryPage',
	    data:{pageNo: pageNo,
	    	pageSize: pageSize,
	    	search_LIKE_name: $('#name').val(),
	    	search_LIKE_remark: $('#remark').val(),
	    	SORT_name:"ASC"
	    	//search_SORT_parent_id :"ASC",
	    },
	    beforeSend: function () {
	    },
	    complete: function () {
	    	layer.close(tip);
	    },
	    error: function(request) {
	        layer.alert("系统错误");
	    },
	    success: function(result) {
	        if (result.status == 0) {
	        	var data = result.data;
	        	app.pageData = data;
	        	laypage({
					cont : 'pageNav',
					pages : data.totalPage,
					curr : data.currentPage,
					skip : true,
					groups : 6,
					jump : function(obj, first) {
						if (!first) {
							query(obj.curr);
						}
					}
				});
	        } else {
	        	sessionCheckTimeOut(result);
	        }
	    }
	});
}

/**
 * 新增
 */
function add(){
	layer_show('新增权限','/security/role/add','','450');
}

/**
 * 修改
 */
function edit(id){
	layer_show('编辑权限','/security/role/edit/'+id,'','450');
}

/*
 * 删除
 */
function del(id){
	layer.confirm('确认要删除吗？',function(){
		var tipIndex = null;
		$.ajax({
			type : "POST",
			url : '/security/role/delete/' + id,
			beforeSend : function() {
				tipIndex = layer.load(0, {shade: false});
			},
			complete : function() {
				layer.close(tipIndex);
			},
			error : function(request) {
				layer.alert("系统出错");
			},
			success : function(data) {
				layer.alert(data.message);
				if (data.status == 0) {
					query();
				}
			}
		});
	});
}


/**
 * 批量删除
 */
var batchDel = function() {

	var selectdItems = $(":checkbox[name=ids]:checked");
		if (selectdItems.size() == 0) {
			layer.alert("请选择要删除的记录！");
			return;
		}
		var ids = [];
		selectdItems.each(function() {
			ids.push($(this).val());
		});

		layer.confirm('确认要删除吗？', function() {
			var tipIndex = null;
			$.ajax({
				type : "POST",
				url : '/security/role/deletes',
				data : {
					ids : ids
				},
				beforeSend : function() {
					tipIndex = layer.load(0, {
						shade : false
					});
				},
				complete : function() {
					layer.close(tipIndex);
				},
				error : function(request) {
					layer.alert("系统出错");
				},
				success : function(data) {
					layer.alert(data.message);
					if (data.status == 0) {
						query();
					}
				}
			});
		});

	};

$(function() {
	query();
});
</script> 
</body>
</html>